<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<p>带渲染器的表格单元格</p>
<jigsaw-table height="400px"
           [data]="tableData"
           [columnDefines]="columns"
           [additionalColumnDefines]="additionalColumns"></jigsaw-table>
<button (click)="changeData()">change data</button>
<!--
    let-context="context" 声明了context，context的结构是 {cellData: string|number, row:number, column:number}
-->
<ng-template #headIcon let-context="context">
    <span class="fa fa-bicycle"></span><span>{{context.cellData}}</span><span>{{this.nativeValue}}</span>
</ng-template>

<ng-template #cellName let-context="context">
    <span class="fa fa-bicycle"></span><span>{{context.cellData}}</span>
</ng-template>

<ng-template #checkboxRenderer let-context="context">
    <jigsaw-checkbox [checked]="context.cellData"></jigsaw-checkbox>
</ng-template>

<ng-template #cellOption let-context="context">
    <a (click)="this.handleClick(context)" href="javascript:;">修改</a> <a (click)="this.handleClick(context)" href="javascript:;">删除</a>
</ng-template>
